<!DOCTYPE html>
<html>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<head>
    <meta charset="utf-8">
    <title>春节拼小老虎游戏(简易版)</title>
</head>

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
    }
    .image_game{
        background-image:url(image/888.png);
    }

    #z-1{
        background-position: 0px 0px;
    }
    #z-2{
        background-position:-200px 0px;
    }
    #z-3{
        background-position:-400px 0px;
    }
    #z-4{
        background-position:0 -200px;
    }
    #z-5{
        background-position: -200px -200px;
    }
    #z-6{
        background-position: -400px -200px;
    }
    #z-7{
        background-position: 0px -400px;
    }
    #z-8{
        background-position: -200px -400px;
    }
    #z-9{
        background-position: -400px -400px;
    }
</style>
<script>
    //对原图进行9等分切割然后打乱顺序
    $(document).ready(function(){
        for(var i=0;i<100;i++){
            var tus=document.getElementsByClassName('image_game');
            var m=parseInt(Math.random()*9);
            var n=parseInt(Math.random()*9);
            var tusmp=tus[m].parentNode;
            var tusnp=tus[n].parentNode;
            tusmp.appendChild(tus[n]);
            tusnp.appendChild(tus[m]);
        }
    });
    //完成两个图片拖拽后的互换;
    function over(e){
        e.preventDefault();
    }
    //抓起
    function drag(e){
        var id=e.target.id;
        e.dataTransfer.setData("id",id);//设置传输的是被抓id；
    }
    //经过
    function drop(e){
        var beizhuaId=e.dataTransfer.getData("id");//接受被抓id;
        var fangID=e.target.id;//所放位置的id;
        var beizhua=document.getElementById(beizhuaId);//获取被抓对象;
        var fang=document.getElementById(fangID);//获取放的对象；
        var f_beizhua=beizhua.parentNode;//分别找到对应的父节点
        var f_fang=fang.parentNode;
        //互换子
        f_beizhua.appendChild(fang);
        f_fang.appendChild(beizhua);
        //成功的判断方法
        win();
    }
    //判断是否拼图完成：每个父和子id名字序号相同，循环 ,累加count;
    function win(){
        var tus=document.getElementsByClassName('image_game');
        var count=0;
        for(var i=0;i<tus.length;i++){
            var tu=tus[i];
            var fu=tu.parentNode;
            var tu_id=tu.getAttribute("id");
            var fu_id=fu.getAttribute("id");
            if(tu_id.replace("z-","")==fu_id.replace("f-","")){
                count++;
                console.log(count);
            }else{
                return;
            }
        }
        //累加到9时即代表图已经完全拼好即游戏结束
        if(count==9){
            alert("你成功了!祝你虎年行大运！");
        }
    }
    function reset(){
        location.reload();
    }
</script>
<body>
<table border="1">
    <tr>
        <td>
            <div id="f-1" ondragover="over(event)" ondrop="drop(event)">
                <div id="z-1" class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
        <td>
            <div id="f-2" ondragover="over(event)" ondrop="drop(event)">
                <div  id="z-2" class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
        <td>
            <div id="f-3" ondragover="over(event)" ondrop="drop(event)">
                <div  id="z-3" class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="f-4" ondragover="over(event)" ondrop="drop(event)">
                <div id="z-4" class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
        <td>
            <div id="f-5" ondragover="over(event)" ondrop="drop(event)">
                <div id="z-5" class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
        <td>
            <div id="f-6" ondragover="over(event)" ondrop="drop(event)">
                <div id="z-6"  class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="f-7" ondragover="over(event)" ondrop="drop(event)">
                <div id="z-7"  class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
        <td>
            <div id="f-8" ondragover="over(event)" ondrop="drop(event)">
                <div id="z-8" class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
        <td>
            <div id="f-9" ondragover="over(event)" ondrop="drop(event)">
                <div id="z-9" class="image_game" draggable="true" ondragstart="drag(event)"></div>
            </div>
        </td>
    </tr>
</table>
<div>
    <button onclick="reset()" style="position: absolute">重新开始</button>
</div>
</body>
</html>